<template><div><h2 id="组合表头" tabindex="-1"><a class="header-anchor" href="#组合表头"><span>组合表头</span></a></h2>
<p>通过 <code v-pre>Grid::combine</code> 方法可以很方便的把任意两个以上的字段组合成一级表头</p>
<p><img src="@source/dcat-admin-2x/assets/images/7dcf4ae7-a085-4559-b20f-3f1e4a3ef07c-C2oRfvWlZG.png" alt=""></p>
<p>示例</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">grid</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token class-name static-context">Grid</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Report</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Grid</span> <span class="token variable">$grid</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token comment">// 第一个参数为一级表头字段名称，第二个字段为二级表头字段名称，二级表头字段最少设置两个</span></span>
<span class="line">        <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">combine</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'avgCost'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'avgMonthCost'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'avgQuarterCost'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'avgYearCost'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">combine</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'avgVist'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'avgMonthVist'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'avgQuarterVist'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'avgYearVist'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token comment">// 设置样式</span></span>
<span class="line">        <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">combine</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'top'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'topCost'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'topVist'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'topIncr'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">style</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'color:#1867c0'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'content'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">limit</span><span class="token punctuation">(</span><span class="token number">50</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'cost'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">sortable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'avgMonthCost'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'avgQuarterCost'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">setHeaderAttributes</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'style'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'color:#5b69bc'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'avgYearCost'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'avgMonthVist'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'avgQuarterVist'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'avgYearVist'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'incrs'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'avgVists'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'topCost'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'topVist'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'topIncr'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'date'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">sortable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div></template>


